<template>
  <el-dialog class='subject-status-add-record' :title="dialogTitle" width="600px" :show-close='true'
             :visible.sync="dialogVisible" :close-on-click-modal="false" :before-close="handleClose">
    <div>
      <el-form :rules="rules" ref="formRef" size="mini" :model="formData" label-width="160px">
        <el-form-item label="性别所在表：" prop="sexIndexTable1">
          <el-select :disabled="!isOperate"  v-model="formData.sexIndexTable1" placeholder="请选择"  style="width: 80%" @change="handleSexIndexTableChange">
            <el-option v-for="item in eCRFDesignList" :key="item.surface" :label="item.surfaceName" :value="item.surface + '#' + item.surfaceName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="性别变量：" prop="sexVariable2">
          <el-select  v-model="formData.sexVariable2" placeholder="请选择" style="width: 80%" :disabled="!formData.sexIndexTable1 || !isOperate">
            <el-option v-for="item in sexList" :key="item.variable" :label="item.variableName" :value="item.variable + '#' + item.variableName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期所在表：" prop="birthIndexTable3">
          <el-select :disabled="!isOperate" v-model="formData.birthIndexTable3" placeholder="请选择" style="width: 80%" @change="handleBirthIndexTableChange">
            <el-option v-for="item in eCRFDesignList" :key="item.surface" :label="item.surfaceName" :value="item.surface  + '#' + item.surfaceName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期变量：">
          <el-select v-model="formData.birthVariable4" placeholder="请选择" style="width: 80%" :disabled="!formData.birthIndexTable3  || !isOperate" @change="handleBirthVariableChange">
            <el-option v-for="item in birthList" :key="item.variable" :label="item.variableName" :value="item.variable + '#' + item.variableName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄变量：">
          <el-select v-model="formData.ageVariable5" placeholder="请选择" style="width: 80%" :disabled="!formData.birthIndexTable3  || !isOperate" @change="handleAgeVariableChange">
            <el-option v-for="item in birthList" :key="item.variable" :label="item.variableName" :value="item.variable + '#' + item.variableName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="实验室检查表：" prop="labCheckTable6">
          <el-select v-model="formData.labCheckTable6" placeholder="请选择" style="width: 80%" @change="handleLabCheckTableChange" :disabled="!isOperate">
            <el-option v-for="item in eCRFDesignList" :key="item.surface" :label="item.surfaceName" :value="item.surface + '#' + item.surfaceName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模块名称变量：" prop="modelVariableName7">
          <el-select v-model="formData.modelVariableName7" placeholder="请选择" style="width: 80%" :disabled="!formData.labCheckTable6  || !isOperate">
            <el-option v-for="item in labCheckList" :key="item.variable" :label="item.variableName" :value="item.variable + '#' + item.variableName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检查日期变量：" prop="checkDateVariable8">
          <el-select v-model="formData.checkDateVariable8" placeholder="请选择" style="width: 80%" :disabled="!formData.labCheckTable6  || !isOperate">
            <el-option v-for="item in labCheckList" :key="item.variable" :label="item.variableName" :value="item.variable + '#' + item.variableName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="实验室变量：">
          <el-select v-model="formData.labVariable9" placeholder="请选择" style="width: 80%" :disabled="!formData.labCheckTable6  || !isOperate">
            <el-option v-for="item in labCheckList" :key="item.variable" :label="item.variableName" :value="item.variable + '#' + item.variableName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="实验室检查明细表：" prop="labCheckDetailTable10">
          <el-select v-model="formData.labCheckDetailTable10" placeholder="请选择" style="width: 80%" @change="handleLabCheckDetailTableChange" :disabled="!isOperate">
            <el-option v-for="item in embeddedList" :key="item.surface" :label="item.surfaceName" :value="item.surface + '#' + item.surfaceName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检查项目变量：" prop="checkProjectVariable11">
          <el-select v-model="formData.checkProjectVariable11" placeholder="请选择" style="width: 80%" :disabled="!formData.labCheckDetailTable10  || !isOperate">
            <el-option v-for="item in labCheckDetailList" :key="item.variable" :label="item.variableName" :value="item.variable + '#' + item.variableName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单位变量：" prop="unitVariable12">
          <el-select v-model="formData.unitVariable12" placeholder="请选择" style="width: 80%" :disabled="!formData.labCheckDetailTable10  || !isOperate">
            <el-option v-for="item in labCheckDetailList" :key="item.variable" :label="item.variableName" :value="item.variable + '#' + item.variableName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="下限值变量：" prop="floorVariable13">
          <el-select v-model="formData.floorVariable13" placeholder="请选择" style="width: 80%" :disabled="!formData.labCheckDetailTable10  || !isOperate">
            <el-option v-for="item in labCheckDetailList" :key="item.variable" :label="item.variableName" :value="item.variable + '#' + item.variableName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上限值变量：" prop="upVariable14">
          <el-select v-model="formData.upVariable14" placeholder="请选择" style="width: 80%" :disabled="!formData.labCheckDetailTable10  || !isOperate">
            <el-option v-for="item in labCheckDetailList" :key="item.variable" :label="item.variableName" :value="item.variable + '#' + item.variableName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检测值变量：" prop="checkVariable15">
          <el-select v-model="formData.checkVariable15" placeholder="请选择" style="width: 80%" :disabled="!formData.labCheckDetailTable10  || !isOperate">
            <el-option v-for="item in labCheckDetailList" :key="item.variable" :label="item.variableName" :value="item.variable + '#' + item.variableName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="实验室正常值判定变量：">
          <el-select v-model="formData.labNormalVariable16" placeholder="请选择" style="width: 80%" :disabled="!formData.labCheckDetailTable10  || !isOperate">
            <el-option v-for="item in labCheckDetailList" :key="item.variable" :label="item.variableName" :value="item.variable + '#' + item.variableName">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button :loading='loading' size="small" type="primary" @click="handleSave" :disabled="!isOperate">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { mapActions } from 'vuex'

export default {
  props: {
    editData: Object,
    dialogVisible: Boolean,
    dialogTitle: String,
    searchParams: Object,
    eCRFDesignList: Array,
    embeddedList: Array,
    isOperate: Boolean 
  },
  data() {
    return {
      rules: {
        sexIndexTable1: [{ required: true, message: '请选择', trigger: 'blur' }],
        sexVariable2: [{ required: true, message: '请选择', trigger: 'blur' }],
        birthIndexTable3: [{ required: true, message: '请选择', trigger: 'blur' }],
        labCheckTable6: [{ required: true, message: '请选择', trigger: 'blur' }],
        modelVariableName7: [{ required: true, message: '请选择', trigger: 'blur' }],
        checkDateVariable8: [{ required: true, message: '请选择', trigger: 'blur' }],
        labCheckDetailTable10: [{ required: true, message: '请选择', trigger: 'blur' }],
        checkProjectVariable11: [{ required: true, message: '请选择', trigger: 'blur' }],
        unitVariable12: [{ required: true, message: '请选择', trigger: 'blur' }],
        floorVariable13: [{ required: true, message: '请选择', trigger: 'blur' }],
        upVariable14: [{ required: true, message: '请选择', trigger: 'blur' }],
        checkVariable15: [{ required: true, message: '请选择', trigger: 'blur' }]
      },
      loading: false,
      defaultFormData: {
        variableName: '',
        type: '',
        embeddedTable: '',
        hide: ''
      },
      typeList: [],
      formData: {},
      sexList: [],
      birthList: [],
      labCheckList: [],
      labCheckDetailList: []
    }
  },

  watch: {
    dialogVisible(val) {
      if (val) {
        this.formData = this.editData.id ? { ...this.editData } : { ...this.defaultFormData }
        console.log('this.formData', this.formData)
        if (this.editData.id) {
          this.handleSexIndexTableChange(this.formData.sexIndexTable1)
          this.handleBirthIndexTableChange(this.formData.birthIndexTable3)
          this.handleLabCheckTableChange(this.formData.labCheckTable6)
          this.handleLabCheckDetailTableChange(this.formData.labCheckDetailTable10)
        }
      } else {
        this.formData = { ...this.defaultFormData }
      }
    },
  },

  methods: {
    ...mapActions('eCRFDesign', ['qryVariableConfigListNoLoading', 'addLaboratoryMappingList', 'editLaboratoryMappingList']),

    // 关闭取消
    handleClose() {
      this.formData = { ...this.defaultFormData }
      this.$emit('handleCancel')
    },

    // 保存提交
    handleSave() {
      this.loading = true
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          const data = {
            ...this.searchParams,
            id: this.formData.id,
            // 性别所在表
            sexIndexTable: this.formData.sexIndexTable1.split('#')[0],
            sexIndexTableChinese: this.formData.sexIndexTable1.split('#')[1],
            sexVariable: this.formData.sexVariable2.split('#')[0],
            sexVariableChinese: this.formData.sexVariable2.split('#')[1],
            // 出生日期
            birthIndexTable: this.formData.birthIndexTable3.split('#')[0],
            birthIndexTableChinese: this.formData.birthIndexTable3.split('#')[1],
            birthVariable: this.formData.birthVariable4 ? this.formData.birthVariable4.split('#')[0] : '',
            birthVariableChinese: this.formData.birthVariable4 ? this.formData.birthVariable4.split('#')[1] : '',
            ageVariable: this.formData.ageVariable5 ? this.formData.ageVariable5.split('#')[0] : '',
            ageVariableChinese: this.formData.ageVariable5 ? this.formData.ageVariable5.split('#')[1] : '',
            // 实验室检查表
            labCheckTable: this.formData.labCheckTable6.split('#')[0],
            labCheckTableChinese: this.formData.labCheckTable6.split('#')[1],
            modelVariableName: this.formData.modelVariableName7.split('#')[0],
            modelVariableNameChinese: this.formData.modelVariableName7.split('#')[1],
            checkDateVariable: this.formData.checkDateVariable8.split('#')[0],
            checkDateVariableChinese: this.formData.checkDateVariable8.split('#')[1],
            labVariable: this.formData.labVariable9 ? this.formData.labVariable9.split('#')[0] : '',
            labVariableChinese: this.formData.labVariable9 ? this.formData.labVariable9.split('#')[1] : '',
            // 实验室检查明细表
            labCheckDetailTable: this.formData.labCheckDetailTable10.split('#')[0],
            labCheckDetailTableChinese: this.formData.labCheckDetailTable10.split('#')[1],
            checkProjectVariable: this.formData.checkProjectVariable11.split('#')[0],
            checkProjectVariableChinese: this.formData.checkProjectVariable11.split('#')[1],
            unitVariable: this.formData.unitVariable12.split('#')[0],
            unitVariableChinese: this.formData.unitVariable12.split('#')[1],
            floorVariable: this.formData.floorVariable13 ? this.formData.floorVariable13.split('#')[0] : '',
            floorVariableChinese: this.formData.floorVariable13 ? this.formData.floorVariable13.split('#')[1] : '',
            upVariable: this.formData.upVariable14.split('#')[0],
            upVariableChinese: this.formData.upVariable14.split('#')[1],
            checkVariable: this.formData.checkVariable15.split('#')[0],
            checkVariableChinese: this.formData.checkVariable15.split('#')[1],
            labNormalVariable: this.formData.labNormalVariable16 ? this.formData.labNormalVariable16.split('#')[0] : '',
            labNormalVariableChinese: this.formData.labNormalVariable16 ? this.formData.labNormalVariable16.split('#')[1] : '',
          }

          if (data.id) {
            this.editLaboratoryMappingList({ data }).then(res => {
              const { code } = res
              if (code === 200) {
                this.$message({
                  message: '保存成功',
                  type: 'success'
                })
                this.$refs.formRef.resetFields()
                this.$emit('handleCancel', 'refresh')
              }
              this.loading = false
            })
          } else {
            this.addLaboratoryMappingList({ data }).then(res => {
              const { code } = res
              if (code === 200) {
                this.$message({
                  message: '保存成功',
                  type: 'success'
                })
                this.$refs.formRef.resetFields()
                this.$emit('handleCancel', 'refresh')
              }
              this.loading = false
            })
          }
        } else {
          this.loading = false
          return false
        }
      })
    },

    // 性别所在表
    handleSexIndexTableChange(value) {
      if (value) {
        this.getVariableList(value.split('#')[0], 'sexList')
      }
    },

    // 出生日期所在表change事件
    handleBirthIndexTableChange(value) {
      if (value) {
        this.getVariableList(value.split('#')[0], 'birthList')
      }
    },

    // 出生日期变量onchange事件
    handleBirthVariableChange(value) {
      if (value) {
        this.formData.ageVariable5 = ''
      }
    },

    // 年龄变量onchange事件
    handleAgeVariableChange(value) {
      if (value) {
        this.formData.birthVariable6 = ''
      }
    },

    // 实验室检查表change事件
    handleLabCheckTableChange(value) {
      if (value) {
        this.getVariableList(value.split('#')[0], 'labCheckList')
      }
    },

    handleLabCheckDetailTableChange(value) {
      console.log('value', value)
      if (value) {
        this.getVariableList(value.split('#')[0], 'labCheckDetailList')
      }
    },

    // 查询变量配置列表
    getVariableList(surface, listType) {
      const params = {
        ...this.searchParams,
        surface
      }
      this.qryVariableConfigListNoLoading({ params }).then((res) => {
        const { data, code } = res
        if (code === 200) {
          this[listType] = data
        }
      })
    },
    
  }
}
</script>
<style lang="scss" scoped>
@import './add-record.scss';
</style>
